<template>
    <section class="store-detail" id="storeDetail">

          <div  v-touch:tap="onViewStoreImgList" class="cover-img bg-img-clip" :style="{height : `${imgStyle.h}px`,backgroundImage:`url(${storeDetail.coverPic})`}">

              <div class="snake-layer" v-if="storeDetail.pics && storeDetail.pics.length > 1">
                <div class="snake-picture">
                  <i class="img-picture ib mr5"></i>
                  <span>{{storeDetail.pics.length}}</span>
                </div>
              </div>

          </div>

          <div class="store-module">
              <div class="store-module-title fx-row fx-row-center ">
                <i class="iconfont icon-order-off mr5"></i>
                <span>健身价格</span>
              </div>
              <div class="store-module-content" >
                ¥ {{storeDetail.unitPrice}}元/小时&nbsp;&nbsp;（24h自助）
              </div>
          </div>


      <div class="store-module">
        <div class="store-module-title fx-row fx-row-center ">
          <i class="iconfont icon-site mr5"></i>
          <span>场馆介绍</span>
        </div>
        <div class="store-module-content" style="line-height: 1.5">
          {{storeDetail.intro}}
        </div>
      </div>



      <div class="store-module">
        <div class="store-module-title fx-row fx-row-center ">
          <i class="iconfont icon-position mr5"></i>
          <span>地址</span>
        </div>
        <div class="store-module-content" style="line-height: 1.5">
          {{storeDetail.address}}    <a class="block text-accent"  href="javascript:void(0)" @click="openLocation()">点击查看地图</a>
        </div>
      </div>


      <div class="store-module">
        <div class="store-module-title fx-row fx-row-center ">
          <i class="iconfont icon-notification mr5"></i>
          <span>注意事项</span>
        </div>
        <div class="store-module-content" style="line-height: 1.5"  v-html="storeDetail.attentions" >

        </div>
      </div>


      <div class="">
        <button  v-touch:tap="onOrder" class="btn fixed-bottom-btn btn-primary btn-block btn-ve-md btn-seq">
          立即预约
        </button>
      </div>


    </section>
</template>
<style lang="scss"  scoped>
  @import "../css/store-detail";
</style>
<script>
    import Util from "util";
    import API  from "api";

    let coverHeaderRadio = 2.516;
    export default{
        name : "storeDetail",
        data(){
            return{
              storeDetail : {}
            }
        },
         mounted : function(){
            let storeId =  this.$route.params.storeId;
            //加载门店详情
            API.biz.getSingleStoreInfo({"storeId" : storeId})
              .then((res)=>{
                  this.storeDetail = res.bizData;
              });



        },
        methods : {

            openLocation : function(){
                Util.WX.openLocation(this.storeDetail.lat,this.storeDetail.lng);
            },

            onViewStoreImgList : function(){
               if(this.storeDetail.pics.length > 1){
                  //调用微信本地预览图片
                  Util.WX.previewImage(this.storeDetail.pics);
               }
            },
            onOrder : function(){
            console.log(this.$route.params.storeId);
             let storeId =  this.$route.params.storeId;
             Util.Storage.setSgObj('storeDetail',this.storeDetail);
             Util.Storage.removeSg("orderInfo");
             window.getRouter().push({ path: '/order/add', query: { "storeId": storeId }});
            }
        },
       computed : {
         imgStyle : function(){
           return Util.Location.ratioElementForWindow(coverHeaderRadio);
          }
        },
        components:{

        }
    }
</script>
